<section>
  <div class="clear-fix">
    <div class="upload-body">
      <d-multiple-upload
        #multipleupload
        [fileOptions]="fileOptions2"
        [uploadedFiles]="uploadedFiles2"
        [filePath]="'name'"
        [uploadOptions]="uploadOptions2"
        (successEvent)="onSuccess3($event)"
        (deleteUploadedFileEvent)="deleteUploadedFile3($event)"
        (errorEvent)="onError3($event)"
        [setCustomUploadOptions]="setCustomUploadOptions"
        [uploadedFilesRef]="uploadedFilesTemp"
        [preloadFilesRef]="preloadFilesTemp"
        [withoutBtn]="true"
      >
      </d-multiple-upload>
    </div>
    <div class="upload-btn">
      <d-button [bsStyle]="'primary'" (click)="multipleupload.upload()">
        {{ UPLOAD }}
      </d-button>
    </div>
  </div>
  <ng-template #uploadedFilesTemp let-uploadedFiles="uploadedFiles" let-deleteFile="deleteFile" let-filePath="filePath">
    <table class="table" *ngIf="uploadedFiles.length > 0" [style.margin-bottom.px]="0">
      <tbody>
        <tr *ngFor="let uploadedFile of uploadedFiles; let index = index">
          <td width="50%">
            <span>{{ uploadedFile.name }}</span>
          </td>
          <td width="25%">
            <span>{{ UPLOADED }}</span>
          </td>
          <td>
            <d-button icon="trash" bsStyle="primary" bsSize="xs" (click)="deleteFile(uploadedFile[filePath])">
              {{ DELETE }}
            </d-button>
          </td>
        </tr>
      </tbody>
    </table>
  </ng-template>
  <ng-template #preloadFilesTemp let-fileUploaders="fileUploaders" let-deleteFile="deleteFile" let-UploadStatus="UploadStatus">
    <table class="table" *ngIf="fileUploaders.length > 0">
      <tr *ngFor="let fileUploader of fileUploaders; let index = index">
        <td width="50%">
          <span>{{ fileUploader.file.name }}</span>
        </td>
        <td width="25%">
          <span *ngIf="fileUploader.status === UploadStatus.preLoad">{{ PRELOAD }}</span>
          <span *ngIf="fileUploader.status === UploadStatus.uploading">{{ UPLOADING }}</span>
          <span *ngIf="fileUploader.status === UploadStatus.uploaded">{{ UPLOADED }}</span>
          <span *ngIf="fileUploader.status === UploadStatus.failed">{{ FAILED }}</span>
        </td>
        <td>
          <d-button
            icon="trash"
            bsStyle="primary"
            bsSize="xs"
            *ngIf="fileUploader.status !== UploadStatus.uploaded"
            [disabled]="fileUploader.status === UploadStatus.uploading"
            (click)="deleteFile(fileUploader.file)"
          >
            {{ DELETE }}
          </d-button>
        </td>
      </tr>
    </table>
  </ng-template>
</section>
